<template>
  <a-list
      v-if="list.length"
      :data-source="list"
      :header="`${list.length} ${list.length > 1 ? 'replies' : 'reply'}`"
      item-layout="horizontal"
      style="font-size: 20px;padding-left: 10px;padding-top: 10px"
  >
    <template #renderItem="{ item }">
      <a-list-item>
        <a-comment
            :author="item.name"
            :avatar="item.photo"
            :content="item.comment"
            :datetime="item.date"
        />
      </a-list-item>
    </template>
  </a-list>
  <a-comment style="padding: 10px">
    <template #avatar>
      <a-avatar :src=user.photo :alt=user.name></a-avatar>
    </template>
    <template #content>
      <a-form-item style="padding-right: 20px;">
        <a-textarea v-model:value="value" :rows="4"/>
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
          Add Comment
        </a-button>
      </a-form-item>
    </template>
  </a-comment>
</template>
<script>
import {computed, defineComponent, onMounted, reactive, ref} from 'vue';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

import store from "@/store";
import axios from "axios";
import {message} from "ant-design-vue";
import router from "@/router";

dayjs.extend(relativeTime);
export default defineComponent({
  name: 'Comment',
  props: {
    list: Array,
    id: Number
  },
  setup(props) {
    const user = computed(() => store.state.user);
    const comments = ref([]);
    const submitting = ref(false);
    const value = ref('');
    const comm = reactive({
      articleId: '',
      userId: "",
      comment: "",
    })

    const handleQuery = () => {
      // comments.value=props.list;

    }

    const handleSubmit = () => {
      console.log("list", props)
      if (value.value) {
        // console.log("list",list.list[0].articleId)
        comm.articleId = props.id
        comm.userId = user.value.id
        comm.comment = value.value
        axios.post("http://127.0.0.1:8880/comment/comment", comm).then((res) => {
          if (res.data.status === 10000) {
            value.value = "";
            console.log(res)
            message.success("评论成功")
            router.go(0)
          } else {
            message.error("评论失败，请重新尝试")
          }
        })
      }
      // submitting.value = true;
      // setTimeout(() => {
      //   submitting.value = false;
      //   comments.value = [{
      //     author: 'Han Solo',
      //     avatar: 'https://joeschmoe.io/api/v1/random',
      //     content: value.value,
      //     datetime: dayjs().fromNow(),
      //   }, ...comments.value];
      //   value.value = '';
      // }, 1000);

      console.log("value", value)
    };

    onMounted(() => {
      // handleQuery();
      // console.log('test',props)
    })

    return {
      user,
      comments,
      submitting,
      value,
      handleSubmit,
    };
  },

});
</script>

<style scoped>

</style>